<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="robots" content="all">
    <meta name="robots" content="index,follow">
    <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>

<body>
    <canvas class="blackhole" style="position: fixed;left: 0;top: 0;z-index: 1;"></canvas>
    <script>
        "use strict"; var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var

            PI = Math.PI, cos = Math.cos, sin = Math.sin, abs = Math.abs, sqrt = Math.sqrt, pow = Math.pow, floor = Math.floor, round = Math.round, random = Math.random, atan2 = Math.atan2;
        var HALF_PI = 0.5 * PI;
        var TAU = 2 * PI;
        var rand = function rand(n) { return n * random(); };
        var randIn = function randIn(min, max) { return rand(max - min) + min; };
        var fadeOut = function fadeOut(t, m) { return (m - t) / m; };
        var fadeInOut = function fadeInOut(t, m) {
            var hm = 0.5 * m;
            return abs((t + hm) % m - hm) / hm;
        };
        var dist = function dist(x1, y1, x2, y2) { return sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2)); };
        var angle = function angle(x1, y1, x2, y2) { return atan2(y2 - y1, x2 - x1); };
        var lerp = function lerp(n1, n2, speed) { return (1 - speed) * n1 + speed * n2; };

        var particleCount = 1000;
        var eventHorizon = 40;

        var canvas = void 0;
        var ctx = void 0;
        var center = void 0;
        var particles = void 0;
        var mouse = void 0;
        var hover = void 0;

        Array.prototype.lerp = function (target, speed) {
            var _this = this;
            this.forEach(function (n, i) { return _this[i] = lerp(n, target[i], speed); });
        }; var

            Particle = function () {
                function Particle() {
                    _classCallCheck(this, Particle);
                    this.init();
                } _createClass(Particle, [{
                    key: "init", value: function init() {
                        this.life = 0;
                        this.ttl = randIn(50, 200);
                        this.speed = randIn(3, 5);
                        this.size = randIn(0.5, 2);
                        this.position = [rand(canvas.a.width), rand(canvas.a.height)];
                        this.lastPosition = [].concat(_toConsumableArray(this.position));
                        this.direction = angle.apply(undefined, _toConsumableArray(this.position).concat(_toConsumableArray(center))) - HALF_PI;
                        this.velocity = [
                            cos(this.direction) * this.speed,
                            sin(this.direction) * this.speed];

                        this.hue = rand(360);
                        this.reset = false;
                    }
                }, {
                    key: "die", value: function die() {
                        var _ctx$a;
                        ctx.a.save();
                        ctx.a.globalAlpha = 0.1;
                        ctx.a.filter = "blur(4px)";
                        ctx.a.globalCompositeOperation = 'multiply';
                        ctx.a.lineWidth = 2;
                        ctx.a.strokeStyle = this.color;
                        ctx.a.beginPath();
                        (_ctx$a = ctx.a).arc.apply(_ctx$a, _toConsumableArray(center).concat([eventHorizon, 0, TAU]));
                        ctx.a.closePath();
                        ctx.a.stroke();
                        ctx.a.restore();

                        this.init();
                    }
                }, {
                    key: "checkBounds", value: function checkBounds() {
                        var _lastPosition = _slicedToArray(
                            this.lastPosition, 2), x = _lastPosition[0], y = _lastPosition[1];

                        return x > canvas.a.width || x < 0 || y > canvas.a.height || y < 0;
                    }
                }, {
                    key: "update", value: function update() {
                        this.lastPosition = [].concat(_toConsumableArray(this.position));
                        this.direction = lerp(
                            angle.apply(undefined, _toConsumableArray(this.lastPosition).concat(_toConsumableArray(center))),
                            angle.apply(undefined, _toConsumableArray(this.position).concat(_toConsumableArray(center))),
                            0.01);

                        this.speed = fadeOut(dist.apply(undefined, _toConsumableArray(this.position).concat(_toConsumableArray(center))), canvas.a.width) * 50;
                        this.velocity.lerp(
                            [cos(this.direction) * this.speed, sin(this.direction) * this.speed],
                            0.01);

                        this.position[0] += this.velocity[0];
                        this.position[1] += this.velocity[1];

                        (this.checkBounds() || this.life++ > this.ttl) && this.init();
                        dist.apply(undefined, _toConsumableArray(this.position).concat(_toConsumableArray(center))) <= eventHorizon && this.die();

                        return this;
                    }
                }, {
                    key: "draw", value: function draw() {
                        var _ctx$a2, _ctx$a3;
                        ctx.a.save();
                        ctx.a.lineWidth = this.size;
                        ctx.a.strokeStyle = this.color;
                        ctx.a.beginPath();
                        (_ctx$a2 = ctx.a).moveTo.apply(_ctx$a2, _toConsumableArray(this.lastPosition));
                        (_ctx$a3 = ctx.a).lineTo.apply(_ctx$a3, _toConsumableArray(this.position));
                        ctx.a.stroke();
                        ctx.a.closePath();
                        ctx.a.restore();

                        return this;
                    }
                }, { key: "color", get: function get() { return "hsla(" + this.hue + ", 50%, 80%, " + fadeInOut(this.life, this.ttl) + ")"; } }]); return Particle;
            }();


        function setup() {
            createCanvas();
            resize();
            createParticles();
            draw();
        }

        function createCanvas() {
            canvas = {
                a: document.createElement("canvas"),
                b: document.createElement("canvas")
            };

            canvas.b.style = "\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t";






            document.body.appendChild(canvas.b);
            ctx = {
                a: canvas.a.getContext("2d"),
                b: canvas.b.getContext("2d")
            };

            center = [0, 0];
            mouse = [0, 0];
            hover = false;
        }

        function createParticles() {
            particles = [];

            var i = void 0;

            for (i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }
        }

        function resize() {
            var _window =
                window, innerWidth = _window.innerWidth, innerHeight = _window.innerHeight;

            canvas.a.width = canvas.b.width = innerWidth;
            canvas.a.height = canvas.b.height = innerHeight;

            center[0] = 0.5 * innerWidth;
            center[1] = 0.5 * innerHeight;
        }

        function mouseHandler(e) {
            var
                type = e.type, clientX = e.clientX, clientY = e.clientY;

            hover = type === "mousemove";

            mouse[0] = clientX;
            mouse[1] = clientY;
        }

        function renderToScreen() {
            ctx.b.save();
            ctx.b.filter = "blur(5px) saturate(200%) contrast(200%)";
            ctx.b.drawImage(canvas.a, 0, 0);
            ctx.b.restore();

            ctx.b.save();
            ctx.b.globalCompositeOperation = "lighter";
            ctx.b.drawImage(canvas.a, 0, 0);
            ctx.b.restore();
        }

        function draw() {
            var _ctx$a4;
            ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);

            ctx.a.save();
            ctx.a.beginPath();
            ctx.a.filter = "blur(2px)";
            ctx.a.fillStyle = "rgba(0,0,0,0.1)";
            (_ctx$a4 = ctx.a).arc.apply(_ctx$a4, _toConsumableArray(center).concat([eventHorizon, 0, TAU]));
            ctx.a.fill();
            ctx.a.closePath();
            ctx.a.restore();

            ctx.b.fillStyle = "rgba(0,0,0,0.5)";
            ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);

            center.lerp(hover ? mouse : [0.5 * canvas.a.width, 0.5 * canvas.a.height], 0.05);

            var i = void 0;

            for (i = 0; i < particleCount; i++) {
                particles[i].draw().update();
            }

            renderToScreen();

            window.requestAnimationFrame(draw);
        }

        window.addEventListener("load", setup);
        window.addEventListener("resize", resize);
        window.addEventListener("mousemove", mouseHandler);
        window.addEventListener("mouseout", mouseHandler);</script>
</body>

</html>